替代文本撰寫：為全球受眾提供描述性的圖像無障礙功能

在當今的數位時代，視覺內容在吸引受眾和傳達資訊方面扮演著至關重要的角色。然而，對於有視覺障礙的使用者來說，存取這些內容可能具有挑戰性。這就是替代文本（alt text）發揮作用的地方。替代文本，或稱替代文字，是嵌入HTML代碼中對圖像的簡短描述。它會被螢幕閱讀器大聲朗讀，讓視障使用者能夠理解圖像的內容和情境。此外，替代文本還能改善搜尋引擎優化（SEO），幫助搜尋引擎理解和索引您的圖像，使您的網站在全球受眾中的能見度更高。

替代文本為何重要：無障礙與SEO

替代文本不僅僅是一個錦上添花的功能；它是網站無障礙的基礎，也是一個寶貴的SEO工具。以下是它如此重要的原因：

為視障使用者提供無障礙體驗

螢幕閱讀器依靠替代文本向無法看見圖像的使用者描述圖像。如果沒有準確且具描述性的替代文本，這些使用者將被排除在完全理解您網站內容的機會之外。想像一下，瀏覽一個新聞網站時，看到一張抗議活動的圖片。若沒有替代文本，螢幕閱讀器可能只會宣告「圖像」，讓使用者完全不知道抗議的內容。像「抗議者在倫敦手持標語，倡導氣候行動」這樣具描述性的替代文本則提供了關鍵的情境。

這對於教學內容來說更為重要。例如，一個展示製作壽司步驟的烹飪網站，需要像「廚師將米飯均勻鋪在海苔上的特寫」這樣的替代文本，以便使用者能夠跟隨操作。

提升SEO表現

搜尋引擎利用替代文本來理解圖像的內容及其與周圍文本的相關性。透過提供具描述性且富含關鍵字的替代文本，您可以幫助搜尋引擎更有效地索引您的圖像，從而提升您網站的整體搜尋排名。例如，如果您在網上銷售手工陶器，使用像「帶有藍色釉彩的手工陶瓷馬克杯」這樣的替代文本，將有助於您的產品在人們搜尋相似物品時出現在搜尋結果中。這對於針對全球市場的電子商務企業尤其重要。

此外，圖像搜尋在搜尋領域中扮演著越來越重要的角色。優化良好的替代文本能確保您的圖像在圖像搜尋結果中被發現，為您的網站帶來額外的流量。

遵守無障礙標準

許多國家都有無障礙法律和指南，例如美國的《美國殘疾人法案》（ADA）、加拿大的《安大略省殘疾人無障礙法案》（AODA）以及歐洲的《歐洲無障礙法案》（EAA）。這些法律通常要求網站對包括視障在內的身心障礙使用者無障礙。提供準確且具描述性的替代文本對於遵守這些標準至關重要。不遵守規定可能會導致法律處罰和聲譽損害。

撰寫有效替代文本的最佳實踐

撰寫有效的替代文本需要仔細的考量和對細節的關注。以下是一些應遵循的最佳實踐：

描述性與簡潔性

替代文本的主要目標是盡可能準確、簡潔地描述圖像。力求在提供足夠細節以傳達圖像意義與保持文本簡短易懂之間取得平衡。通常，幾個詞到一個短句就足夠了。思考圖像試圖傳達什麼。想像您正在向一個看不見圖像的人描述它。

範例：

不佳： image.jpg

良好： 一群人在孟買用仙女棒慶祝排燈節。

關注情境

理想的替代文本取決於圖像的情境。思考圖像如何與周圍內容相關，以及它增加了什麼資訊。如果圖像純粹是裝飾性的，您可以使用空的alt屬性（alt=""）來告知螢幕閱讀器應忽略它。例如，如果您有一個不傳達任何有意義資訊的圖案背景圖像，使用空的alt屬性是合適的。

範例：

在一個關於日本旅遊的頁面上：

不佳： 日本花園

良好： 位於京都的寧靜日本花園，內有錦鯉池。

包含相關關鍵字（但不要堆砌）

雖然替代文本的主要目的是無障礙，但它也提供了提升SEO的機會。包含準確描述圖像並與周圍內容相關的關鍵字。但是，要避免關鍵字堆砌，這可能對SEO有害，並使替代文本對使用者幫助不大。專注於提供自然且具描述性的說明，並在適當之處包含相關關鍵字。

範例：

對於一張傳統蘇格蘭裙的圖像：

不佳： 蘇格蘭裙 格子呢 羊毛 衣服 蘇格蘭 傳統 蘇格蘭

良好： 一名男子穿著帶有皇家斯圖爾特格子圖案的傳統蘇格蘭裙。

具體描述人物

如果圖像中有人物，請提供關於他們的具體資訊，例如姓名、角色或活動。這對於新聞文章或教育內容中的圖像尤其重要。如果圖像是歷史人物，請提及他們的姓名和重要性。如果是在「關於我們」頁面上的團隊成員照片，請包含他們的姓名和職位。

範例：

不佳： 人們

良好： 納爾遜·曼德拉在約翰尼斯堡一場反種族隔離集會上向群眾演說。

描述圖像的功能性

如果圖像是連結或按鈕，替代文本應描述該連結或按鈕的功能。例如，如果圖像是寫著「提交」的按鈕，替代文本就應該是「提交」。如果圖像是連結到另一個頁面，替代文本應描述目標頁面。這對於依賴螢幕閱讀器導航網站的使用者至關重要。

範例：

對於連結到聯絡頁面的圖像：

不佳： 標誌

良好： 連結至聯絡我們頁面。

避免重複

如果圖像已在周圍的文本中被描述，應避免在替代文本中重複相同的資訊。相反，應專注於提供文本中未涵蓋的額外細節或情境。這有助於避免重複，並確保替代文本為使用者提供價值。

範例：

如果圖像旁的段落已經描述了一種特定的花：

不佳： 一朵向日葵

良好： 一張向日葵的特寫，展示其錯綜複雜的種子圖案。

使用正確的語法和拼寫

確保您的替代文本沒有語法錯誤和拼寫錯誤。這將使螢幕閱讀器更容易解讀文本，也讓使用者更容易理解圖像。在發布前仔細校對您的替代文本。即使是小錯誤也可能影響使用者體驗和SEO。

不要包含「...的圖像」或「...的圖片」

螢幕閱讀器會自動宣告這是一張圖像，因此說「...的圖像」或「...的圖片」是多餘的。只需描述圖像的內容即可。

範例：

不佳： 艾菲爾鐵塔的圖像

良好： 巴黎艾菲爾鐵塔在夜間被點亮。

測試您的替代文本

撰寫替代文本後，用螢幕閱讀器進行測試，以確保它能清晰準確地描述圖像。有許多免費的螢幕閱讀器可供使用，例如NVDA（NonVisual Desktop Access）和ChromeVox。測試您的替代文本將幫助您識別任何需要改進的地方，並確保所有使用者都能無障礙地存取。

在不同情境下的有效替代文本範例

為了進一步說明撰寫有效替代文本的原則，以下是在不同情境中的一些範例：

電子商務

圖像： 一個帶有精緻縫線的皮製手提包的特寫。

替代文本： 手工製作的皮製手提包，有精緻的縫線和黃銅扣環。

新聞文章

圖像： 一張香港抗議活動的照片。

替代文本： 香港抗議者在反對引渡條例的示威中撐著雨傘。

教育網站

圖像： 人類心臟的插圖。

替代文本： 人類心臟圖，顯示心房、心室和主要血管。

旅遊部落格

圖像： 秘魯馬丘比丘的全景圖。

替代文本： 秘魯安地斯山脈中古老的印加城堡馬丘比丘的全景。

食譜網站

圖像： 一盤剛出爐的巧克力豆餅乾。

替代文本： 一疊金黃色的巧克力豆餅乾放在一個白色盤子上。

應避免的常見錯誤

雖然撰寫替代文本看似簡單，但有幾個常見的錯誤您應該避免：

• 使用通用的替代文本：避免使用如「圖像」或「圖片」等通用替代文本。這些描述對使用者毫無價值。
• 關鍵字堆砌：避免在替代文本中填滿過多的關鍵字。這可能對SEO有害，並使替代文本對使用者幫助不大。
• 將替代文本留空：如果圖像傳達了有意義的資訊，將替代文本留空是一個重大的無障礙問題。
• 使用冗長且雜亂的描述：保持替代文本簡潔且重點突出。避免使用難以理解的冗長描述。
• 忽略情境：在撰寫替代文本時，務必考慮圖像的情境及其與周圍內容的關係。

在HTML中實作替代文本

為圖像添加替代文本很簡單。在HTML代碼的``標籤中使用`alt`屬性即可。

範例：

``

如果圖像是純粹裝飾性的，請使用空的alt屬性：

``

撰寫替代文本的工具與資源

有許多工具和資源可以幫助您撰寫有效的替代文本：

• 網站無障礙評估工具：使用網站無障礙評估工具來識別缺少替代文本或描述不充分的圖像。例如WAVE和Axe。
• 螢幕閱讀器：使用螢幕閱讀器測試您的替代文本，確保它能清晰準確地描述圖像。
• 無障礙指南：參考如《網頁內容無障礙指南》（WCAG）等無障礙指南，以獲取有關撰寫無障礙替代文本的詳細資訊。
• 線上課程和教學：參加線上課程和教學，學習更多關於替代文本撰寫和網站無障礙的知識。

結論

替代文本是網站無障礙的重要元素，也是一個寶貴的SEO工具。透過遵循本指南中概述的最佳實踐，您可以確保所有使用者（包括有視覺障礙的使用者）都能存取您的圖像，並提高您網站在搜尋結果中的能見度。在撰寫替代文本時，請記得要具描述性、簡潔且注意情境，並始終使用螢幕閱讀器測試您的替代文本，以確保它能清晰準確地描述圖像。透過優先考慮替代文本，您可以為全球受眾創造更具包容性和無障礙的線上體驗。

讓您的網站全球無障礙顯示了您對包容性的承諾，並擴大了您的潛在使用者群。遵循這些指南，您不僅使您的網站合規，還改善了所有使用者的體驗，無論他們的能力或地點如何。

請記住，網際網路是全球資源，無障礙的內容惠及每一個人。